<template>
	<view class="progress" v-cloak>
		<list :id="item.id" :item="listItem" :key="item.id" :showProgress="false" :probottom="false"
			:showBorder="false" :update = "!authAdd">
			<text slot="rightDetail"></text>
			<text slot="timeValue"></text>
			<text slot="update" @click="goAddprocess(proItem.id,proItem)">进度更新</text>
			<text slot="topDetail"></text>
			<text slot="botTime"></text>
			<text slot="topTime"></text>
		</list>
		<u-empty text="暂无进程列表~~" mode="list" v-if="projectList.length==0 && showAdd == false" margin-top='50'></u-empty>
		<view class="progressList" v-for="(item,index) in copyProjectList" :key="item.id">
			<view class="title" :style="{background: item.bg,color:item.color}" >
				阶段{{index+1}}：{{item.start_time}} - {{item.end_time}}
			</view>
			<view class="content">
				<view class="top" :style="{color:item.color}">
					当前状态
				</view>
				<view class="bottom">
					<u--textarea v-model="item.content" :disabled="true"></u--textarea>
				</view>
			</view>
		</view>
		<view class="" v-if="showAdd">
			<view class="progressList">
				<view class="title" style="display: flex;">
					<!-- 阶段{{projectList.length+1}}：{{pushData.allString||'点击选择日期范围'}} -->
					<view class="">
						阶段{{projectList.length+1}}：
					</view>
					<view @click="openDate2(index)" style="color: #157DFA;"> {{pushData.start_time||'开始时间'}}</view>
					<view class="hx">
						-
					</view>
					<view @click="openDate3(index)" style="color: #157DFA;"> {{pushData.end_time||'结束时间'}}</view>
					<view class="closeSel" @click="closeStartTime">
						<u-icon name="close-circle" color="#505050;" v-if="pushData.start_time&&pushData.end_time"
							size="22"></u-icon>
					</view>
				</view>
				<view class="content">
					<view class="top" :style="{color: item.color}">
						当前状态
					</view>
					<view class="bottom">
						<u--textarea v-model="pushData.content" placeholder="请输入内容"></u--textarea>
					</view>
				</view>
			</view>
			<view class="add">
				<view class="empty" style="flex: 1;">
				</view>
				<u-button type="primary" icon="plus" text="添加/确认" size="small" :plain="true" customStyle="width:30%"
					@click="add">
				</u-button>
			</view>
		</view>
		<!-- <view class="submit">
			<u-button type="primary" customStyle="background-color: #157DFA;color:#fff;" text="完成提交" size="samll"
				class="submitBtn"></u-button>
		</view> -->
		<view class="bot" style="height: 30rpx;">
		</view>
		<!-- <good-date-picker ref="goodDatePicker2" @change="changeDate2" :option="goodDatePickerOption2">
		</good-date-picker> -->
		<u-datetime-picker :show="show" mode="date" @confirm="confirm" ref="datetimePicker" @cancel='show=false'
			v-model="value1">选择有效时间</u-datetime-picker>
		<!-- <u-datetime-picker :show="show" v-model="value1" mode="date" closeOnClickOverlay @confirm="confirm"
			@cancel="cancel" ></u-datetime-picker> -->
		<u-datetime-picker :show="show1" mode="date" @confirm="confirm1" ref="datetimePicker1" @cancel='show1=false'
			v-model="value2">选择有效时间</u-datetime-picker>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import list from '@/components/common/list.vue'
	// import GoodDatePicker from '@/components/good-date-picker/good-date-picker.vue';
	import {
		addprojectProcess,
	} from '@/request/api.js'
	export default {
		props: {
			projectList: {
				type: Array,
				default: []
			},
			project_id: {
				type: String,
				default: ''
			},
			item: {
				type: String,
				default: ''
			},
			authAdd: {
				type: Boolean,
				default: false
			},
			proItem:{
				type: Object, default: () => ({})
			}
		},
		components: {
			list,
			// GoodDatePicker
		},
		computed: {
			copyProjectList(){
				return this.projectList.map((item,index) => {
					let bg = '',
						color = ''
					switch((index + 1) % 3){
						case 0: 
							 bg = 'rgba(186, 231, 255, 0.2)',
							 color = '#157DFA'
							break;
						case 1:
							 bg = 'rgba(71, 87, 142, 0.15)',
							 color = '#47578E'
							break;
						case 2:
							 bg = 'rgba(255, 160, 0, 0.1)'
							 color = '#FFA000'
							break;
						default:
							break;
					}
					return {
						...item,
						bg,
						color
					}
				})
			}
		},
		watch: {
			item(n, o) {
				console.log(n,222)
				this.listItem = n
			},
			proItem:{
				handler: function(n) {
					console.log(n,'n')
					if(n) {
						this.listItem = n
					}
					
				},
				immediate: true,
				deep:true//对象内部的属性监听，也叫深度监听
			},
		},
		created() {
			// this.item = JSON.parse(this.item)
			this.proItem ? this.listItem = this.proItem:''
			if (this.authAdd) {
				setTimeout(() => {
					this.showAdd = true
				}, 200)
			}
		},
		data() {
			return {
				listItem: {

				},
				show1: false,
				showAdd: false,
				value1: Number(new Date()),
				value2: Number(new Date()),
				goodDatePickerOption2: {
					//弹窗模式区间选择配置项
					currentRangeStartDate: '', //根据实际业务需求设置的区间选择默认显示初始时间，可为空,默认今天
					currentRangeEndDate: '', //根据实际业务需求设置的默认区间选择显示结束时间，可为空，默认明天
					initStartDate: '2020-01-01', //可选起始时间，可为空,默认今天
					initEndDate: '2030-06-05', //可选结束时间，可为空,默认4个月后
					isRange: true, //是否开启范围选择，默认fals1
					isModal: true, //是否弹窗模式，默认false
				},
				pushData: {
					content: '',
					start_time: '',
					end_time: '',
					allString: '',
					project_id: ''
				},
				curIndex: 0,
				show: false
			};
		},
		methods: {
			goAddprocess(id,item){
				console.log(id,item,'item.id')
				const urlItem = JSON.stringify(item)
				console.log(urlItem)
				uni.navigateTo({
					url:`/my_pages/addProgcess/addProgcess?id=${id}&item=${urlItem}`
				})
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			closeStartTime() {
				this.pushData.start_time = ''
				this.pushData.end_time = ''
			},
			openDate3() {
				this.show1 = true
			},
			check(startTime, endTime) {
				if (startTime.length > 0 && endTime.length > 0) {
					var startTmp = startTime.split("-");
					var endTmp = endTime.split("-");
					var sd = new Date(startTmp[0], startTmp[1], startTmp[2]);
					var ed = new Date(endTmp[0], endTmp[1], endTmp[2]);
					if (sd.getTime() > ed.getTime()) {
						return false;
					}
				}
				return true;
			},
			async add() {
				let auth = this.check(this.pushData.start_time, this.pushData.end_time)
				if (auth == false) {
					// uni.$u.toast('开始时间不能大于结束时间')
					this.$refs.uToast.show({
						message: '开始时间不能大于结束时间',
						type: 'error',
						duration: 1500
					})
					return false;
				}
				console.log(auth)
				if (this.pushData.content == '') {
					uni.$u.toast('填写内容')
					return false;
				}
				this.pushData.project_id = this.project_id
				let res = await addprojectProcess(this.pushData)
				uni.$u.toast('添加成功')
				uni.navigateBack()
			},
			confirm(e) {
				const timeFormat = uni.$u.timeFormat
				let date = timeFormat(e.value)
				this.pushData.start_time = date
				this.show = false
			},
			confirm1(e) {
				const timeFormat = uni.$u.timeFormat
				let date = timeFormat(e.value)
				this.pushData.end_time = date
				this.show1 = false
			},
			openDate2(e) {
				//打开区间选择日期弹窗
				// this.curIndex = e
				// this.$refs.goodDatePicker2.open();
				this.show = true
			},
			changeDate2(e) {
				//区间选择日期选择回调
				console.log(e);
				this.pushData.start_time = e.startDate;
				this.pushData.end_time = e.endDate;
				this.pushData.allString = e.startDate + '-' + e.endDate
			},
		}
	}
</script>

<style>
	::v-deep .bottom .u-textarea{
		border: none !important;
	}
	.content .u-textarea{
		background: gold !important;
		border: none !important;
	}
</style>

<style lang="scss" scoped>
		
    ::v-deep .u-textarea--disabled{
		background-color:#fff;
	}
	.progress {
		position: relative;
		color: #979797;
		// background-color: #fff;
		height: calc(100vh - 50rpx);
		// background: linear-gradient(180deg, #D6ECFF -708.26%, rgba(21, 125, 250, 0) 86.35%);
		margin-top: -20rpx;
		background: #fff;

		// transform: matrix(1, 0, 0, -1, 0, 0);
		.add {
			// position: absolute;
			display: flex;
			justify-content: flex-end;
			padding: 0 20rpx;
			margin: 60rpx 0;
		}

		[v-clock] {
			display: none;
		}

		.hx {
			margin: 0 24rpx;
		}

		.submit {
			// position: absolute;
			bottom: 100rpx;
			padding: 0 20rpx;
			margin-bottom: 50rpx;
			display: flex;
			justify-content: flex-end;

			.submitBtn {}
		}

		.progressList {
			.title {
				color: #505050;
				font-weight: 500;
				margin-top: 20rpx;
				// background: linear-gradient(180deg, rgba(9, 23, 58, 0.1) 0%, rgba(14, 35, 66, 0.1) 100%);
				background: rgba(21, 125, 250, 0.15);
				padding: 10rpx 20rpx;
			}

			.content {
				display: flex;
				flex-direction: column;

				.top {
					padding: 20rpx;
				}

				.bottom {
					padding: 0 20rpx;
				}
			}
		}
		
		// .progressList:nth-child(1){
		// 	background-color: rgba(71, 87, 142, 0.15);
		// }
	}
</style>
